<template>
  <div class="box">
    <div>List组件</div>
    <div class="box1">
      <!-- 默认值 -->
      <slot>xxx</slot>
    </div>
    <div class="box2">
      <!-- 具名插槽 -->
      <!-- 顾名思义就是有名字的插槽 -->
      <!-- 也就是 在 <solt> 组件上使用 一个name属性,值是自己定义的 -->
      <slot name="dog">xxx</slot>
    </div>
    <div class="box3">
      <!-- 作用域插槽 -->
      <!-- 也就是 在 <solt> 组件上使用 一个name属性,值是自己定义的 -->
      <!-- 并通过v-bind绑定到 slot组件上 -->
      <slot :age="age" :info="info" name="in">xxx</slot>
    </div>
  </div>
</template>

<script>
import Child1 from './Child1.vue'
export default {
  name: 'List',
  // 子组件通过props接收
  props: ['age', 'info'],
  comments: { Child1 }
}
</script>
